<script setup lang="ts" name="CCChild2Page_Mitt">
import { onUnmounted, ref } from "vue";
import emitter from "../../../utils/emitter";

const book = ref("红楼梦");
const toy = ref<string>();
const car = ref<string>();

emitter.on("send-toy", (v: string) => {
  toy.value = v;
});
emitter.on("send-car", (v: string) => {
  car.value = v;
});

onUnmounted(() => {
  emitter.off("send-car");
  emitter.off("send-toy");
});
</script>

<template>
  <div class="bg-pink-100 p-6 my-6">
    <h2 class="text-xl">子组件2</h2>
    <div>图书：{{ book }}</div>
    <div v-show="toy">接收到的玩具：{{ toy }}</div>
    <div v-show="car">接收到的车：{{ car }}</div>
    <div>
      <button class="border px-1 py-0.5 bg-gray-50" @click="emitter.emit('send-book', book)">
        共享图书
      </button>
    </div>
  </div>
</template>
